<template>
	<div class="container">
		<p class="text-title">通知公告</p>
		<ul class="nav-menu">
			<li class="nav-menu-item flex" v-for="(item, index) in dataList" :key="index" @click="handleLinkto(item)">
				<el-avatar shape="square" class="icon" :style="{ background: item.color }"> {{ item.noticeTitle.substring(0, 1) }} </el-avatar>
				<div class="right">
					<p class="label">{{ item.noticeTitle }}</p>
					<p class="tip text-overflow" v-html="item.noticeContent"></p>
					<p class="time">{{ item.createTime }}</p>
				</div>
			</li>
			<li>
				<el-button text type="primary" @click="handleMore"
					>查看更多
					<el-icon>
						<icon-right theme="outline" size="24" />
					</el-icon>
				</el-button>
			</li>
		</ul>

		<el-dialog v-model="visible"  :width="nowRowData.id ? '45%' : '85%'" append-to-body :z-index="10000">
			<NoticeList v-if="!nowRowData.id"></NoticeList>
			<NoticeDetail v-else :nowRowData="nowRowData"></NoticeDetail>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import NoticeList from './NoticeList/index.vue'
import NoticeDetail from './NoticeDetail/index.vue'
const dataList = ref([])
const visible = ref(false)
const nowRowData = ref({} as any)
const handleLinkto = (item?: any) => {
	nowRowData.value = item
	apiMod
		.view_sysNoticeRecord_read({
			idList: [item.id],
		})
		.then(() => {
			visible.value = true
		})
}
const handleMore = () => {
	visible.value = true
	nowRowData.value = {}
}
const getInitData = () => {
	apiMod.view_sysNoticeRecordByBsc_page({
		roleType:2,
    	pageParaPO: { size: 6, current: 1}
  }).then((res) => {
		dataList.value = res.data.records.map((item) => {
			return {
				...item,
				color: ['#00CFAD', '#0052D9'][Math.floor(Math.random() * 2)],
			}
		})
	})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: auto;
}
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	padding: 11px 0;
}
.nav-menu {
	background: #fff;
	padding: 10px;
	border-radius: 10px;

	&-item {
		margin: 6px;
		border-bottom: 1px solid #f5f5f5;

		.right {
			max-width: calc(100% - 50px);

			.label {
				color: #000;
				font-size: 1rem;
				font-weight: 700;
			}

			.tip {
				color: #000;
				font-weight: 400;
				opacity: 0.5;
				font-size: 0.88rem;
				margin: 0.41rem 0 0.81rem 0;
			}

			.time {
				color: #000;
				font-weight: 400;
				font-size: 0.88rem;
				opacity: 0.8;
				margin-bottom: 0.41rem;
			}
		}

		.icon {
			width: 48px;
			height: 48px;
			border-radius: 4px;
			margin-right: 10px;
			font-weight: 700;
			font-size: 26px;
			color: #feffff;
		}
	}
}
</style>
